<script setup>
import {doGet} from "../../util/request.js";
import {showMessage} from "../../util/message.js";
import {onMounted} from "vue";
import * as echarts from 'echarts';

const loadNoteWayDate = () => {
  doGet('/api/clue/noteway',{}).then(resp => {
     if (resp.data.code === 200){
       let chartDom = document.getElementById('main');
       let myChart = echarts.init(chartDom);
       let option;

       option = {
         title: {
           text: 'Referer of a Website',
           subtext: 'Fake Data',
           left: 'center'
         },
         tooltip: {
           trigger: 'item'
         },
         legend: {
           orient: 'vertical',
           left: 'left'
         },
         series: [
           {
             name: 'Access From',
             type: 'pie',
             radius: '50%',
             data: resp.data.data,
             emphasis: {
               itemStyle: {
                 shadowBlur: 10,
                 shadowOffsetX: 0,
                 shadowColor: 'rgba(0, 0, 0, 0.5)'
               }
             }
           }
         ]
       };

       option && myChart.setOption(option);
     }else {
       showMessage("查询失败，原因："+resp.data.msg,'error')
     }
  })
}
const loadNoteWayCloumData = () => {
  doGet('/api/clue/noteway',{}).then(resp => {
    if (resp.data.code === 200){
      var chartDom = document.getElementById('main1');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      };

      option && myChart.setOption(option);
    }else {
      showMessage("查询失败，原因："+resp.data.msg,'error')
    }
  })
}
onMounted(()=>{
  loadNoteWayDate()
  loadNoteWayCloumData()
})
</script>

<template>
  <div id="main" style="width: 600px;height:400px;"></div>
  <div id="main1" style="width: 600px;height:400px;"></div>
</template>

<style scoped>

</style>